<template>
  <div>
    <div class="edu-opertion-bar">
      <div class="float-right">
        <el-button
          type="primary"
          @click="addEduBack">新建</el-button>
      </div>
    </div>
    <el-table
      v-loading="loading"
      :data="dataList"
      style="width: 100%">
      <el-table-column
        prop="graduateSchool"
        label="毕业学校" />
      <el-table-column
        prop="formLearning"
        label="学习形式" />
      <el-table-column
        prop="majorName"
        label="专业名称" />
      <el-table-column
        prop="schoolUnitName"
        label="学校单位名称" />
      <el-table-column
        prop="degreeMajorName"
        label="学位专业名称" />
      <el-table-column
        prop="graduateDate"
        label="毕业时间">
        <template slot-scope="scope">
          <span>{{ scope.row.graduateDate | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="editEduBack(scope.row)">编辑
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="delEduBack(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import eduBack from 'common/src/api/studentEduBackg'
import { mapState } from 'vuex'
import filters from 'common/src/filters'

export default {
  name: 'edu-backgroud',
  filters: {
    formatDate(date) {
      return filters.formatDate(date, 'yyyy/MM/dd hh:mm:ss')
    }
  },
  data() {
    return {
      dataList: [],
      loading: false,
      uid: '',
      id: ''
    }
  },
  computed: {
    ...mapState({
      mockUser: state => state.session.mockUser
    })
  },
  created() {
    if (this.$route.params.id) {
      this.uid = this.$route.params.id
    } else {
      this.uid = this.mockUser
        ? this.mockUser.uid
        : localStorage.getItem('uid')
    }
    this.initPage()
  },
  methods: {
    addEduBack() {
      this.$router.push('/CreateEduBack/' + this.uid)
    },
    editEduBack(item) {
      this.$router.push('/CreateEduBack/' + this.uid + '/' + item.id)
    },
    async delEduBack(item) {
      this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          eduBack.deleteEduBackgroud(item.id).then(res => {
            if (res && res.code === 200) {
              this.$message({
                message: '恭喜你成功删除一条记录！',
                type: 'success'
              })
              this.initPage()
            }
          })
        })
        .catch(() => {
          this.$message({
            message: '删除异常！',
            type: 'warning'
          })
        })
    },
    async initPage() {
      const res = await eduBack.findEduBackgroudList(this.uid)
      if (res && res.code === 200) {
        this.dataList = res.data
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
